<template>
  <div class="topSelect" @click.stop="closeTooltips">
    <div class="topSelectLabel">
      <div class="name">岗位筛选</div>
    </div>
    <div class="topSelectList">
      <div class="topSelectContainer">
        <div class="jobRegionCheckbox">
          <span class="jobRegionCheckboxLabel">工作地点</span>
          <el-checkbox-group class="jobRegionCheckboxGroup" v-model="jobFilterDisplayData['regionid']"
            :class="{ optionsBox: true }" @change="handleCheckboxChange">
            <el-checkbox :label="item.value + '-' + item.label" v-for="(item, index) in regionList"
              :key="index">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
          <el-popover placement="bottom" width="300" popper-class="filterPopoverContainer" trigger="click"
            v-model="popoverVisible">
            <!-- 以下重新做一个可以选省和市的选择器，这种脑溢血的交互不是我自己想写的哈，， -->
            <div class="popoverJobFilterList">
              <span class="popoverJobFilterItem" :class="{
              'jobFilterItem': true,
              'active': activeProvinceId===item.value
            }" v-for="(item, index) in regionDataWithAll" :key="index">
                <el-tooltip placement="bottom" effect="light" popper-class="filterTooltipsContainer">
                  <div slot="content">
                    <div class="jobFilterItemTooltipsContent TooltipsContent">
                      <el-checkbox-group :class="[
                      'jobFilterItemTooltipCheckboxGroup',
                      'TooltipsRegionCheckboxGroup',
                      'optionsBox',
                      'regionid'
                    ]" v-model="jobFilterDisplayData['regionid']"
                        @change="(e) => handlePopoverFilterCheckboxChange(item,e, 'regionid')">
                        <el-checkbox :label="_item.value + '-' + _item.label" v-for="(_item, _index) in item.children"
                          :key="_index">{{ _item.label }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                  <span :class="{ popoverJobFilterItemLabel: true }">{{ item.label}}
                  </span>
                </el-tooltip>
              </span>
            </div>
            <span :class="{'regionTooltipsElement':true,'active':activeProvinceId}" slot="reference">
              其他地区
              <img :src="jobFilterArrowActivated" class="jobFilterArrow up" alt="" v-if="popoverVisible">
              <img :src="jobFilterArrowDeactivated" class="jobFilterArrow" alt="" v-else>
            </span>
          </el-popover>
        </div>
        <div class="jobFilterList">
          <span class="jobFilterItem" :class="{
              jobFilterItem: true,
              active: jobFilterDisplayData[item.prop].length > 0
            }" v-for="(item, index) in jobFilterList" :key="index">
            <el-tooltip placement="bottom" effect="light" v-if="item.options.length > 1"
              popper-class="filterTooltipsContainer">
              <div slot="content">
                <div class="jobFilterItemTooltipsContent TooltipsContent">
                  <el-checkbox-group :class="[
                      'jobFilterItemTooltipCheckboxGroup',
                      'TooltipsRegionCheckboxGroup',
                      'optionsBox',
                      item.prop
                    ]" v-model="jobFilterDisplayData[item.prop]"
                    @change="(e) => handleFilterCheckboxChange(e, item.prop)">
                    <el-checkbox :label="_item.value" v-for="(_item, _index) in item.options"
                      :key="_index">{{ _item.label }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <span
                :class="{ jobFilterItemLabel: true }">{{ getItemValueName(jobFilterDisplayData[item.prop].length > 0,item.label) }}
                <!-- <span
                  v-if="jobFilterData[item.prop].length>0">{{'('+jobFilterData[item.prop].length+')'}}
                </span > -->
                <img :src="jobFilterArrowActivated" class="jobFilterArrow" alt=""
                  v-if="jobFilterDisplayData[item.prop].length > 0">
                <img :src="jobFilterArrowDeactivated" class="jobFilterArrow" alt="" v-else>
              </span>
            </el-tooltip>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { eduList, salaryList, expList } from "@/utils/jobFilterData.js";
import { regionDataWithAll } from "@/utils/provinceData.js";
import jobFilterArrowActivated from "@/assets/images/png/jobFilterArrowActivated.png";
import jobFilterArrowDeactivated from "@/assets/images/png/jobFilterArrowDeactivated.png";
export default {
  name: "jobFilter",
  data() {
    return {
      popoverVisible: false,
      activeProvinceId: "",
      regionDataWithAll,
      eduList,
      salaryList,
      expList,
      tooltipsVisible: true,
      currentClassList: [],
      // 下面这里要有两个Data，一个是用来显示的，一个是用来存储的，如果共用同一个会有触发问题
      // 如果在这里加了字段，还要在index里面加
      jobFilterData: {
        zpTrade: [],
        salary: [],
        gznum: ["-1||0"],
        eduId: [],
        regionid: [],
      },
      jobFilterDisplayData: {
        zpTrade: [],
        salary: [],
        gznum: ["-1||0"],
        eduId: [],
        regionid: ["100000-全国"],
      },
      jobFilterList: [
        { label: "薪酬待遇", options: salaryList, prop: "salary" },
        { label: "工作经验", options: expList, prop: "gznum" },
        { label: "学历要求", options: eduList, prop: "eduId" },
      ],
      regionList: [
        {
          value: "100000",
          label: "全国",
        },
        {
          value: "110000",
          label: "北京",
        },
        { value: "310000", label: "上海" },
        {
          value: "440100",
          label: "广州",
        },
        {
          value: "440300",
          label: "深圳",
        },
        {
          value: "510100",
          label: "成都",
        },
        { value: "500000", label: "重庆" },
        { value: "330100", label: "杭州" },
        { value: "610100", label: "西安" },
        {
          value: "420100",
          label: "武汉",
        },
        {
          value: "320500",
          label: "苏州",
        },
        { value: "410100", label: "郑州" },
        { value: "320100", label: "南京" },
        {
          value: "120000",
          label: "天津",
        },
        { value: "430100", label: "长沙" },
        { value: "441900", label: "东莞" },
        {
          value: "330200",
          label: "宁波",
        },
        { value: "440600", label: "佛山" },
        {
          value: "340100",
          label: "合肥",
        },
        { value: "370200", label: "青岛" },
        {
          value: "530100",
          label: "昆明",
        },
        {
          value: "210100",
          label: "沈阳",
        },
        {
          value: "370100",
          label: "济南",
        },
        {
          value: "320200",
          label: "无锡",
        },
        {
          value: "350200",
          label: "厦门",
        },
        {
          value: "350100",
          label: "福州",
        },
        {
          value: "330300",
          label: "温州",
        },
        {
          value: "330700",
          label: "金华",
        },
        {
          value: "230100",
          label: "哈尔滨",
        },
        {
          value: "210200",
          label: "大连",
        },
        {
          value: "520100",
          label: "贵阳",
        },
        {
          value: "450100",
          label: "南宁",
        },
        { value: "350500", label: "泉州" },
        {
          value: "130100",
          label: "石家庄",
        },
        { value: "220100", label: "长春" },
        { value: "360100", label: "南昌" },
        { value: "441300", label: "惠州" },
        { value: "320400", label: "常州" },
        { value: "330400", label: "嘉兴" },
        { value: "320300", label: "徐州" },
        { value: "320600", label: "南通" },
        { value: "140100", label: "太原" },
        { value: "130600", label: "保定" },
        { value: "440400", label: "珠海" },
        { value: "442000", label: "中山" },
        {
          value: "620100",
          label: "兰州",
        },
        {
          value: "371300",
          label: "临沂",
        },
        { value: "370700", label: "潍坊" },
        { value: "370600", label: "烟台" },
        { value: "330600", label: "绍兴" },
      ],
      jobFilterArrowActivated,
      jobFilterArrowDeactivated,
    };
  },
  computed: {
    regionId() {
      return this.$store.state.user.regionId;
    },
  },
  watch: {
    regionId: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (!newValue) return;
        //后端接口返回有的话就要应用成初始值
        const regionId = newValue;
        const extra = localStorage.getItem("extra");
        const extraData = JSON.parse(extra || {});
        let regionName = extraData.regionName;
        if (regionId && regionName) {
          //考虑名字带省的情况,这里只是为了让checkbox勾上，如果你要传出去还得做额外处理。。
          //名字确实现在用不到，但是在考公考编那边出现了需要传到另外一个组件的情况，所以这里先做出预留
          //如果newValue最后四位数字是0000，说明是省份，否则是市区
          if (regionName.indexOf("省") != -1) {
            regionName = "全部";
          }
          this.jobFilterDisplayData["regionid"] = [newValue + "-" + regionName];
          this.jobFilterData["regionid"] = [newValue + "-" + regionName];
          //尝试高亮省份
          this.activeProvinceId = regionId;
        }
      },
    },
  },
  mounted() {
    let campusJobTrads = localStorage.getItem("campusJobTrads");
    if (campusJobTrads) {
      campusJobTrads = JSON.parse(campusJobTrads).map((item, index) => {
        return {
          value: item.tradeid,
          label: item.tradename,
        };
      });
      this.jobFilterList.unshift({
        label: "公司行业",
        options: campusJobTrads,
        prop: "zpTrade",
      });
    }
  },
  methods: {
    getItemValueName(isActive, name) {
      // jobFilterDisplayData[item.prop].length > 0
      if (isActive) {
        return name + " ( 1 )";
      } else {
        return name;
      }
    },
    reqGetFilterList() {
      const params = {};
      getNavigationTree(params)
        .then((res) => {
          if (res.code == 200) {
            this.jobFilterList = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    closeTooltips() {
      this.currentClassList.forEach((item) => {
        item.isShowTooltip = false;
      });
      this.secondSelectedItem = {};
    },
    handleFilterCheckboxChange(value, prop) {
      this.jobFilterData[prop] = [];
      this.jobFilterDisplayData[prop] = [];
      if (value && value.length) {
        // this.jobFilterData[prop].push(value[value.length - 1]);
        this.jobFilterData[prop][0] = value[value.length - 1];
        this.jobFilterDisplayData[prop][0] = value[value.length - 1];
      }
      console.log("handleFilterCheckboxChange", this.jobFilterData[prop]);

      this.$emit("selectedJobChecks", this.jobFilterData);
    },
    handlePopoverFilterCheckboxChange(item, value, prop) {
      this.jobFilterData[prop] = [];
      this.jobFilterDisplayData[prop] = [];
      if (value && value.length) {
        // this.jobFilterData[prop].push(value[value.length - 1]);
        this.jobFilterData[prop][0] = value[value.length - 1];
        this.jobFilterDisplayData[prop][0] = value[value.length - 1];
      }
      console.log("handleFilterCheckboxChange", this.jobFilterData[prop]);
      this.activeProvinceId = item.value;
      this.$emit("selectedJobChecks", this.jobFilterData);
    },
    handleCheckboxChange(value) {
      this.jobFilterData["regionid"] = [];
      this.jobFilterDisplayData["regionid"] = [];
      if (value && value.length) {
        // this.jobFilterData["regionid"].push(value[value.length - 1]);
        this.jobFilterData["regionid"][0] = value[value.length - 1];
        this.jobFilterDisplayData["regionid"][0] = value[value.length - 1];
      }

      this.$emit("selectedJobChecks", this.jobFilterData);
    },
  },
};
</script>
<style lang="scss" scoped>
.disn {
  display: none;
}
.topSelect {
  display: flex;
  position: sticky;
  top: 60px;
  margin: 0 14px 12px;
  padding: 16px 28px;
  padding-right: 70px;
  background: linear-gradient(180deg, #d0e3ff 0%, #f1f4f9 50%);
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.26);
  z-index: 4;
  width: calc(100% - 28px);
  .topSelectLabel {
    flex: 0 0 80px;
    font-size: 17px;
    display: flex;
    margin: 0 4px 0 0;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #c8d4e6;
    border-radius: 1px;
    padding-right: 15px;
    .name {
      width: 34px;
      position: relative;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 23px;
      // letter-spacing: 5px;
      font-size: 17px;
    }
    .name::before {
      content: "";
      z-index: -1;
      position: absolute;
      bottom: 2px;
      left: 50%;
      width: 32px;
      height: 10px;
      border-radius: 50% / 100% 100% 0 0;
      width: 32px;
      height: 8px;
      background: linear-gradient(180deg, #0b6eff 0%, #eff2f9 100%);
      transform: skewX(180deg) translateX(-55%) translateY(50%);
      opacity: 0.47;
      // clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
  }
  .topSelectList {
    .topSelectContainer {
      padding-left: 29px;
      .jobRegionCheckbox {
        display: flex;
        .jobRegionCheckboxLabel {
          height: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #222222;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          margin-right: 24px;
        }
        .jobRegionCheckboxGroup {
          // max-width: calc(100% - 254px);
          max-width: calc(100% - 177px);
          max-height: 19px;
          overflow: hidden;
        }
        .regionTooltipsElement {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 95px;
          height: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #555555;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          cursor: pointer;
          &.active {
            background-color: #cadfff;
            padding: 4px 8px;
            border-radius: 4px;
            color: #0b6eff;
          }
          .jobFilterArrow {
            width: 14px;
            height: 14px;
            margin-left: 5px;
            transition: transform 0.3s ease-in-out;
          }
          .up {
            transform: rotate(180deg);
          }
        }
      }
      .jobFilterList {
        margin-top: 14px;
        .jobFilterItem {
          height: 30px;
          background: #e3e9f3;
          border-radius: 4px;
          padding: 4px 8px;
          margin-right: 24px;
          .jobFilterItemLabel {
            width: 56px;
            height: 20px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            line-height: 20px;
            text-align: left;
            font-style: normal;
          }
          &.active {
            background: #cadfff;
            .jobFilterItemLabel {
              color: #0b6eff;
            }
          }
          .jobFilterArrow {
            width: 14px;
            height: 14px;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
// 最外面的容器的代码在index.scss中
.el-tooltip__popper {
  background: #fcfcfc;
  box-shadow: 0px 0px 26px 0px rgba(178, 181, 203, 0.5);
  border-radius: 8px;
}
.TooltipsContent {
  max-width: 373px;
  padding: 0 10px;
  .TooltipsRegionCheckboxGroup {
    ::v-deep .el-checkbox {
      min-width: auto;
      margin: 4px 0;
      margin-right: 14px;
    }
  }
  .zpTrade {
    ::v-deep .el-checkbox {
      width: 110px;
      margin-right: 7px;
    }
  }
  .gznum {
    ::v-deep .el-checkbox {
      width: 100px;
    }
  }
  .salary {
    ::v-deep .el-checkbox {
      width: 102px;
    }
  }
}
::v-deep .el-checkbox {
  font-weight: 400;
  .el-checkbox__inner {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background-color: transparent;
    border: 1px solid #9ea9c1;
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: transparent;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    background-color: transparent;
    border-color: #dcdfe6;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: transparent;
    border-color: #409eff;
  }
  .el-checkbox__inner::after {
    left: 3px;
    height: 5px;
    width: 3px;
    border: 1px solid #409eff;
    border-left: 0;
    border-top: 0;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    left: 3px;
    height: 5px;
    width: 3px;
    border: 1px solid #409eff;
    border-left: 0;
    border-top: 0;
    border-color: #409eff;
  }
}
::v-deep .el-checkbox__label {
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #555555;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #409eff;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__inner {
  color: #9ea9c1;
}
</style>
